<template>
  <el-dialog v-model="$store.state.homeview.dialogFormVisible" title="用户基本信息修改">
    <el-form :model="form" :label-width="formLabelWidth">
      <el-form-item label="日期" :label-width="formLabelWidth" prop="date">
        <el-input v-model="form.date" autocomplete="off"  placeholder="请输入住户入住日期"
        :value="store.state.homeview.row.Date"/>
      </el-form-item>
      <el-form-item label="楼盘名称" :label-width="formLabelWidth" prop="houseName">
        <el-select v-model="form.houseName" placeholder="请选择楼盘名称" >
          <el-option label="翻斗花园" value="shanghai" />
          <el-option label="青青草原" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="房源类型" :label-width="formLabelWidth" prop="type">
        <el-input v-model="form.type" autocomplete="off" placeholder="请输入住户房源类型"
        :value="store.state.homeview.row.Type"/>
      </el-form-item>
      <el-form-item label="门牌号" :label-width="formLabelWidth" prop="doorNum">
        <el-input v-model="form.doorNum" autocomplete="off" placeholder="请输入住户门牌号"
        :value="store.state.homeview.row.HomeNumber"/>
      </el-form-item>
      <el-form-item label="房源户型" :label-width="formLabelWidth" prop="shape">
        <el-input v-model="form.shape" autocomplete="off" placeholder="请输入住户房源信息" 
        :value="store.state.homeview.row.HouseSize"/>
      </el-form-item>
      <el-form-item label="户主" :label-width="formLabelWidth" prop="host">
        <el-input v-model="form.host" autocomplete="off" placeholder="请输入户主名" 
        :value="store.state.homeview.row.Host"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog(0)">取消</el-button>
        <el-button type="primary" @click="dialog(1)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, } from 'element-plus'
import { useStore } from "vuex";
const store = useStore();

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  date: '',
  houseName: '',
  delivery: false,
  type: '',
  doorNum: '',
  shape: '',
  host:''
})

const dialog = (num: Number) => {
  if (num == 0) {
    //   用户点击了取消
    //改变弹窗的状态
    store.commit('SET_DIALOG')
    ElMessage({
      type: 'info',
      message: '已取消！',
    })
  } else {
  
    console.log(store.state.homeview.row);
    //   用户点击了确定
    //   得到输入框的值
    // console.log(form.date + "---" + form.houseName + "---" + form.type + "---" + form.doorNum + "---" + form.shape + "---" + form.host)

    store.commit("SET_SET", {
      date: form.date,
      houseName: form.houseName,
      type: form.type,
      doorNum: form.doorNum,
      shape: form.shape,
      host: form.host,
    })
    form.date=''
    form.houseName =''
    form.type =''
    form.doorNum =''
    form.shape=''
    form.host = ''
    ElMessage({
      type: 'success',
      message: '已修改！',
    })
    store.commit("SET_DIALOG");
  }
}

</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>